import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import { connect } from "react-redux";
import {
    friendItemToMainDataAction,
    showMotifyBynameCardAction,
    setIsBlockedChatAction,
} from "@redux/actions02";
import { profile } from "@depjs/storage";

const FriendsMainMould = (props) => {
    const { transData, showMotifyBynameCardAction, setIsBlockedChatAction } =
        props;

    const [isShowCard, setIsShowCard] = useState(false);

    useEffect(() => {
        setIsShowCard(transData.isShowCard);
    }, [transData.isShowCard]);

    return (
        <div className={styles.friends_main_module}>
            {props.children}
            <div
                className={`${styles.context_card} ${
                    isShowCard ? "" : styles.hide
                }`}
                style={{ top: transData?.y, left: transData?.x }}
            >
                <p className={styles.to_top}>置顶</p>
                <p
                    className={styles.blocked}
                    onClick={() => {
                        setIsBlockedChatAction(
                            transData.friend?.userName,
                            !transData.friend?.isBlockedChat
                        );
                    }}
                >
                    {transData.friend?.isBlockedChat
                        ? "开启新消息提醒"
                        : "消息免打扰"}
                </p>
                <p className={styles.not_show_chat}>不显示聊天</p>
                <p className={styles.delte_chat}>删除聊天</p>
                {transData?.friend?.userName === profile.userName ? null : (
                    <p
                        className={styles.motify_byname}
                        onClick={() => {
                            showMotifyBynameCardAction(true);
                        }}
                    >
                        修改备注
                    </p>
                )}
            </div>
        </div>
    );
};

export default connect(
    (state) => ({
        transData: state.friendItemToMainDataReducer,
    }),
    {
        friendItemToMainDataAction,
        showMotifyBynameCardAction,
        setIsBlockedChatAction,
    }
)(FriendsMainMould);
